<style scoped>
.split {
  height: calc(100vh - 140px);
  background: #ffffff;
  border: 1px solid #dcdee2;
}

.split-pane {
  padding: 10px;
}
</style>
<template>
  <div class="split">
    <Split v-model="split1">
      <div slot="left" class="split-pane">
        <Tree :data="treeData" @on-select-change="changeTree"></Tree>
      </div>
      <div slot="right" class="split-pane">

        <Card style="margin-bottom: 10px">
          <Form inline class="form-search">
            <FormItem>
              <Input v-model="keyword" placeholder="名称/编码" style="width: 200px" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="
  page = 1;
SearchProduct();
              " icon="md-search">查询</Button>
            </FormItem>

          </Form>
        </Card>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle"
          :data="tableData" :height="tableHeight"></Table>
        <Page :total="total" :current="page" :page-size="size"
          :page-size-opts="[10, 50, 100, 300, 500, 1000, 2000, 5000]" @on-change="
            (s) => {
              page = s;
              SearchProduct();
            }
          " @on-page-size-change="
  (p) => {
    size = p;
    page = 1;
    SearchProduct();
  }
" show-total show-sizer />

       <Modal
      :footer-hide="true"
      :width="1000"
      draggable
      v-model="modalData"
      title="变更记录"
      :mask-closable="false"
    >
      <productlog :Id="tempDataId" v-if="modalData"  />
    </Modal>
      </div>
    </Split>
  </div>
</template>

<script>

import { SearchProduct, GetTreeProductType, DeleteProduct, SearchUnit, SaveProductCheck } from '@/api/product'

import { InitProductTypeTree } from '@/libs/tools'
import productlog from '../product/productlog.vue'
export default {
  name: 'product',
  components: {
    productlog
  },
  data () {
    return {
      split1: 0.15,
      total: 0,
      page: 1,
      size: 50,
      tableHeight: 450,
      keyword: '',
      typeid: 0,
      ruleValidate: {
        TypeId: [
          {
            type: 'number',
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        Name: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      loadingTable: false,
      modalData: false,
      tempDataId: 0,
      typeList: [],
      treeData: [],
      selectTreeData: [],
      tableTitle: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 60,
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.size + 1)
          }
        },
        {
          title: '记录',
          align: 'center',
          resizable: true,
          width: 80,
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.tempDataId = params.row.Id
                    this.modalData = true
                  }
                }
              },
              '查看'
            )
          }
        },
        {
          key: 'Name',
          title: '分类',
          width: 150,
          resizable: true,
          align: 'center'
        },

        {
          key: 'Name',
          title: '名称',
          minWidth: 200,
          resizable: true,
          align: 'center'
        },
        {
          key: 'Code',
          title: '编码',
          minWidth: 200,
          resizable: true,
          align: 'center'
        },
        {
          key: 'Specification',
          title: '规格',
          minWidth: 300,
          resizable: true,
          align: 'center'
        },
        {
          key: 'Num',
          title: '账面数量',
          minWidth: 100,
          resizable: true,
          align: 'center'
        },
        {
          key: 'Num',
          title: '实际数量',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h(
              'Input',
              {
                props: {
                  type: 'number',
                  value: params.row.CheckNum
                },
                style: {
                  fontSize: '18px'
                },
                on: {
                  input: (val) => {
                    params.row.CheckNum = val
                  }
                }
              },
              params.row.CheckNum
            )
          }
        },
        {
          key: ' ',
          title: '操作',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'success',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.SaveProductCheck(params.row)
                  }
                }

              },
              '保存'
            )
          }
        },
        {
          key: 'Unit',
          title: '单位',
          minWidth: 100,
          resizable: true,
          align: 'center'
        }

      ],
      tableData: [],
      unitList: []
    }
  },
  computed: {},
  methods: {
    changeTree (a, b) {
      this.typeid = b.id
      this.SearchProduct()
    },
    SaveProductCheck (item) {
      let vm = this
      var reqData = {
        Id: item.Id,
        CheckNum: item.CheckNum
      }
      SaveProductCheck(reqData).then((res) => {
        var data = res.data
        if (data.StatusCode == 200) {
          vm.$Message.success('保存成功')
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    SearchProduct () {
      let vm = this
      vm.loadingTable = true
      var reqData = {
        keyword: vm.keyword,
        typeid: vm.typeid
      }
      SearchProduct(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          data.Data.Items.forEach(item => {
            item.CheckNum = item.Num
          })
          vm.tableData = data.Data.Items
          vm.total = data.Data.TotalCount
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    GetTreeProductType () {
      let vm = this
      GetTreeProductType(0).then((res) => {
        const data = res.data
        if (data.StatusCode == 200) {
          this.selectTreeData = InitProductTypeTree(data.Data)
          this.treeData = [
            {
              id: 0,
              label: '全部',
              title: '全部',
              value: 0,
              expand: true,
              children: this.selectTreeData
            }

          ]
        } else {
          vm.$Message.error({ title: '提示', content: data.Errors })
        }
      })
    },
    DeleteProduct (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗？',
        onOk: () => {
          DeleteProduct(id).then((res) => {
            const data = res.data
            if (data.StatusCode == 200) {
              this.SearchProduct()
              this.$Message.success({ title: '提示', content: '删除成功' })
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => { }
      })
    },
    SearchUnit () {
      let vm = this
      var reqData = {

      }
      SearchUnit(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          vm.unitList = data.Data.map(m => { return m.Name })
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },

    AddData () {
      this.tempData = {

      }
      this.modalData = true
    }
  },

  mounted () {
    this.tableHeight = window.innerHeight - 300
    this.GetTreeProductType()
    this.SearchProduct()
    this.SearchUnit()
  }
}
</script>
